<template>
  <div id="{{  chartsId  }}" class="higCharts">
  </div>
</template>
<script>    
import { changeMsg,changeKind } from '../vuex/action'  
import BS from '../dataManage'
var echarts = require('echarts');  
export default {
  data() {
    return {
      myChart: ''
    }
  },
  props: {
    'chartsTitle':{
      type: String
    },
    'chartsId':{
      type: String
    },
    'chartsSubText':{
      type: String
    },
    'chartsUrl':{
      type: String
    },
    'picktime':{
      type:Number
    },
    'chartsFontSize':{
      type:String
    }
  },
   vuex: {
   getters: {
      kind(state) {
        return state.kind
      },
      msg(state){
        return state.msg
      }
    }
  },
  ready() {
    var self =this;     
    var myChart = echarts.init(document.getElementById(this.chartsId));
      // 绘制图表
      myChart.setOption({
          title: { 
            text: this.chartsTitle, 
            subtext: this.chartsSubText, 
            x :'center',
            textStyle :{
              fontSize :this.chartsFontSize,
              fontWeight :'normal',
              color:'#b3c2cc'
            },
            subtextStyle :{
               fontSize :14,
               color:'#b3c2cc'
            }
          },
          grid:{
            x:'85px'
          },
           tooltip: {
              trigger: 'axis',
              formatter: "{b}:{c}",
              axisPointer: {
                  type: ''
              }
          },
          xAxis: {
              type: 'value',
              show:false
          },
          yAxis: {
              type: 'category',
               axisLine:{
                show:false
               },
               axisTick:{
                show:false
               },
               axisLabel:{
                textStyle:{
                  color:"#b3c2cc"
                }
              },
              data: ['教务处','学生处','人事处','团委','校办','保卫处']
          },
          series: [{
                  type: 'bar',
                  data: [],
                  barWidth :15
                }]
        });
    BS.getLateralBarCharts.call(myChart,self.msg,self.chartsUrl,self.kind)
    self.$watch('msg',function(){
      BS.getLateralBarCharts.call(myChart,this.msg,this.chartsUrl,this.kind)
    })
    self.$watch('kind',function(){
      BS.getLateralBarCharts.call(myChart,this.msg,this.chartsUrl,this.kind)
    })
  }
}
</script>
<style scoped>
.higCharts{
  width: 100%;
  height:380px; 
}
</style>


